import React, { useEffect, useState } from 'react'
import { Badge, TabBar } from 'antd-mobile'
import { useCommonFunc } from '../hooks/useCommon'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
  } from 'antd-mobile-icons'
import { useLocation } from 'react-router-dom';
const AntFoot = () => {
    const { gotopage } = useCommonFunc()
    const { pathname } = useLocation()
    const tabs = [
        {
          key: 'home',
          title: '首页',
          icon: <AppOutline />,
          badge: Badge.dot,
          path:"/app/home"
        },
        {
          key: 'todo',
          title: '发现',
          icon: <UnorderedListOutline />,
          badge: '5',
          path:"/app/find"
        },
        {
          key: 'message',
          title: '新闻',
          icon: (active: boolean) =>
            active ? <MessageOutline /> : <MessageOutline />,
          badge: '99+',
          path:"/app/news"
        },
        {
          key: 'personalCenter',
          title: '我的',
          icon: <UserOutline />,
          path:"/app/mine"
        },
      ]

      const [activeKey , setActiveKey] = useState<string>(pathname)

      // 点击切换
      const change = (value:string) => {
        gotopage(value)
        setActiveKey(value)
      }

      useEffect(()=>{
        setActiveKey(pathname)
      },[pathname])

  return (
    <div style={{position:"fixed", bottom:0, left:0, width:"100%"}}>
        <TabBar onChange={change} activeKey={activeKey}>
          {tabs.map(item => (
            <TabBar.Item key={item.path} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
    </div>
  )
}

export default AntFoot